<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="450" style="border:1px solid #000;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = '18px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Helper function to draw an arrowhead
    function drawArrow(ctx, fromx, fromy, tox, toy) {
        const headlen = 10; // length of head in pixels
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    }

    // --- Main Drawing ---

    // 1. Define Geometry Parameters
    const origin = { x: 80, y: 380 };
    const theta_deg = 30;
    const theta_rad = theta_deg * Math.PI / 180;
    const wedgeBase = 300;
    const wedgeHeight = wedgeBase * Math.tan(theta_rad);
    const cylinderRadius = 40;

    // 2. Draw Coordinate System
    ctx.beginPath();
    // X-axis
    drawArrow(ctx, origin.x, origin.y, origin.x + 380, origin.y);
    ctx.fillText('x', origin.x + 390, origin.y);
    // Y-axis
    drawArrow(ctx, origin.x, origin.y, origin.x, origin.y - 300);
    ctx.fillText('y', origin.x, origin.y - 310);
    ctx.stroke();

    // Origin Label 'O'
    ctx.fillText('O', origin.x - 15, origin.y + 15);
    
    // Z-axis symbol (out of page)
    ctx.beginPath();
    ctx.arc(origin.x - 35, origin.y + 25, 8, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(origin.x - 35, origin.y + 25, 2, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('z', origin.x - 35, origin.y + 45);


    // 3. Draw the Wedge (Inclined Plane)
    const wedgeV1 = { x: origin.x, y: origin.y }; // bottom-left
    const wedgeV2 = { x: origin.x + wedgeBase, y: origin.y }; // bottom-right
    const wedgeV3 = { x: origin.x, y: origin.y - wedgeHeight }; // top-left

    ctx.beginPath();
    ctx.moveTo(wedgeV1.x, wedgeV1.y);
    ctx.lineTo(wedgeV2.x, wedgeV2.y);
    ctx.lineTo(wedgeV3.x, wedgeV3.y);
    ctx.closePath();
    ctx.stroke();

    // 4. Draw the Cylinder and related labels
    // Position the contact point T on the incline
    const distFromTop = 120;
    const T = {
        x: wedgeV3.x + distFromTop * Math.cos(theta_rad),
        y: wedgeV3.y + distFromTop * Math.sin(theta_rad)
    };
    
    // Calculate cylinder center C2
    const C2 = {
        x: T.x - cylinderRadius * Math.sin(theta_rad),
        y: T.y - cylinderRadius * Math.cos(theta_rad)
    };

    // Draw Cylinder
    ctx.beginPath();
    ctx.arc(C2.x, C2.y, cylinderRadius, 0, 2 * Math.PI);
    ctx.stroke();
    
    // Draw dot for center C2
    ctx.beginPath();
    ctx.arc(C2.x, C2.y, 2.5, 0, 2 * Math.PI);
    ctx.fill();

    // Draw dashed radius line from C2 to T
    ctx.beginPath();
    ctx.setLineDash([5, 3]);
    ctx.moveTo(C2.x, C2.y);
    ctx.lineTo(T.x, T.y);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // Add labels: T, R, C2
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('T', T.x - 25, T.y);
    ctx.fillText('R', C2.x + 15, C2.y + 20);
    ctx.fillText('C', C2.x, C2.y - 15);
    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText('2', C2.x + 8, C2.y - 12);
    ctx.font = '18px Times New Roman'; // Reset font
    
    // 5. Draw Wedge Center of Mass C1
    const C1 = {
        x: (wedgeV1.x + wedgeV2.x + wedgeV3.x) / 3,
        y: (wedgeV1.y + wedgeV2.y + wedgeV3.y) / 3
    };
    
    ctx.beginPath();
    ctx.arc(C1.x, C1.y, 2.5, 0, 2 * Math.PI);
    ctx.fill();
    
    // Add label C1
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('C', C1.x + 12, C1.y + 5);
    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText('1', C1.x + 20, C1.y + 8);
    ctx.font = '18px Times New Roman'; // Reset font

    // 6. Draw Angle θ
    const angleArcRadius = 50;
    ctx.beginPath();
    ctx.arc(wedgeV2.x, wedgeV2.y, angleArcRadius, Math.PI, Math.PI + theta_rad);
    ctx.stroke();
    
    // Add label θ
    const angleLabelPos = {
        x: wedgeV2.x - angleArcRadius * 0.7 * Math.cos(theta_rad / 2),
        y: wedgeV2.y + angleArcRadius * 0.7 * Math.sin(theta_rad / 2)
    };
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('θ', angleLabelPos.x, angleLabelPos.y);

    // 7. Add Caption
    ctx.font = '18px "SimSun", "Songti SC", serif'; // Use a font that supports Chinese characters
    ctx.fillText('力图 6.17.1', canvas.width / 2, 425);

</script>

</body>
</html>